<template>
  <div
    class="resize-box-container"
    @mousemove.stop="move($event)"
    @mouseup="window.stopResize()"
    @mouseleave="window.stopResize()"
    :class="{'resize-box-container-transition':!window.isOnResize()}"
    :style="{ pointerEvents: window.isOnResize() ? 'auto' : 'none', zIndex: window.zIndex() }"
  >
    <div
      class="resize-box"
      @mousedown="window.active()"
      :style="{
        left: window.position.left + 'px',
        top: window.position.top + 'px',
        right: window.position.right + 'px',
        bottom: window.position.bottom + 'px'
      }"
    >
      <div
        class="left"
        @mousedown.stop="window.startResize('left', $event)"
        :style="{ cursor: window.content.size.resizeHorizontal ? 'ew-resize' : 'auto' }"
      ></div>
      <div
        class="right"
        @mousedown="window.startResize('right', $event)"
        :style="{ cursor: window.content.size.resizeHorizontal ? 'ew-resize' : 'auto' }"
      ></div>
      <div
        class="top"
        @mousedown="window.startResize('top', $event)"
        :style="{ cursor: window.content.size.resizeVertical ? 'ns-resize' : 'auto' }"
      ></div>
      <div
        class="bottom"
        @mousedown="window.startResize('bottom', $event)"
        :style="{ cursor: window.content.size.resizeVertical ? 'ns-resize' : 'auto' }"
      ></div>
      <div
        class="left-top"
        @mousedown="window.startResize('left-top', $event)"
        :style="{
          cursor:
            window.content.size.resizeVertical && window.content.size.resizeHorizontal
              ? 'nwse-resize'
              : window.content.size.resizeVertical
              ? 'ns-resize'
              : window.content.size.resizeHorizontal
              ? 'ew-resize'
              : 'auto'
        }"
      ></div>
      <div
        class="top-right"
        @mousedown="window.startResize('top-right', $event)"
        :style="{
          cursor:
            window.content.size.resizeVertical && window.content.size.resizeHorizontal
              ? 'nesw-resize'
              : window.content.size.resizeVertical
              ? 'ns-resize'
              : window.content.size.resizeHorizontal
              ? 'ew-resize'
              : 'auto'
        }"
      ></div>
      <div
        class="right-bottom"
        @mousedown="window.startResize('right-bottom', $event)"
        :style="{
          cursor:
            window.content.size.resizeVertical && window.content.size.resizeHorizontal
              ? 'nwse-resize'
              : window.content.size.resizeVertical
              ? 'ns-resize'
              : window.content.size.resizeHorizontal
              ? 'ew-resize'
              : 'auto'
        }"
      ></div>
      <div
        class="bottom-left"
        @mousedown="window.startResize('bottom-left', $event)"
        :style="{
          cursor:
            window.content.size.resizeVertical && window.content.size.resizeHorizontal
              ? 'nesw-resize'
              : window.content.size.resizeVertical
              ? 'ns-resize'
              : window.content.size.resizeHorizontal
              ? 'ew-resize'
              : 'auto'
        }"
      ></div>
      <div class="box-body" :style="boxBodyStyle">
        <slot></slot>
      </div>
      <div v-if="mask" class="mask"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { useThemeStore } from "@/stores/theme"
import * as _ from "lodash"
import type BiuOS from "@/core/biu-os"

const props = defineProps({
  application: {
    type: Object as () => BiuOS.Application,
    required: true
  },
  window: {
    type: Object as () => BiuOS.Window,
    required: true
  },
  mask: {
    type: Boolean,
    required: false,
    default: false
  },
  theme: {
    type: String,
    required: false,
    default: "auto"
  }
})

const themeType = useThemeStore().getThemeType()
const boxBodyStyle = computed(() => {
  const style: any = { borderRadius: props.window?.getStatus() === "fullscreen" ? 0 : "10px" }
  let type = props.theme
  if (props.theme === "auto") {
    type = themeType.value!
  }
  if (type === "dark") {
    style["--box-body-background"] = "rgba(50, 50, 50, 0.9)"
  } else {
    style["--box-body-background"] = "rgba(240, 240, 240, 0.9)"
  }
  // if (!props.window.positionTransform.type) {
  //   style["backdrop-filter"] = "blur(16px)"
  //   style["-webkit-backdrop-filter"] = "blur(16px)"
  // }
  return style
})

const move = _.debounce((event: MouseEvent) => {
  props.window?.resize(event)
}, 1)
</script>

<style scoped lang="scss">
$borderSize: 5px;
$doubleBorderSize: 10px;

.resize-box-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;

  .resize-box {
    pointer-events: auto;
    position: absolute;

    & > div {
      position: absolute;
      z-index: 1;
    }

    .left,
    .right {
      width: $doubleBorderSize;
      //background-color: blueviolet;
      cursor: ew-resize;
      height: 100%;
    }

    .top,
    .bottom {
      height: $doubleBorderSize;
      width: 100%;
      cursor: ns-resize;
      //background-color: cadetblue;
    }

    .left {
      left: 0;
    }

    .right {
      right: 0;
    }

    .top {
      top: 0;
    }

    .bottom {
      bottom: 0;
    }

    .left-top,
    .top-right,
    .right-bottom,
    .bottom-left {
      width: $doubleBorderSize;
      height: $doubleBorderSize;
      //background-color: chartreuse;
    }

    .left-top,
    .right-bottom {
      cursor: nwse-resize;
    }

    .top-right,
    .bottom-left {
      cursor: nesw-resize;
    }

    .left-top {
      top: 0;
      left: 0;
    }

    .top-right {
      top: 0;
      right: 0;
    }

    .right-bottom {
      right: 0;
      bottom: 0;
    }

    .bottom-left {
      bottom: 0;
      left: 0;
    }

    .box-body {
      z-index: 0;
      left: $borderSize;
      right: $borderSize;
      top: $borderSize;
      bottom: $borderSize;
      background: var(--box-body-background);
      box-shadow: 0 0 2px 0 rgba(100, 100, 100, 0.5);
      border: 0.5px solid rgba(100, 100, 100, 0.5);
      overflow: hidden;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .mask {
      position: absolute;
      z-index: 1;
      left: $borderSize;
      right: $borderSize;
      top: $borderSize;
      bottom: $borderSize;
      background-color: rgba(200, 200, 200, 0.5);
      border-radius: 10px;
    }
  }
}

.resize-box-container-transition {
  .resize-box {
    transition: all 0.1s ease;
  }
}
</style>
